<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>定时任务监控</title>
    <% include("../layout/css.html"){} %>
    <style>
        .textarea-inherit {
            width: 100%;
            height: 100%;
            overflow: auto;
            word-break: break-all;
        }

    </style>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格顶部工具栏 -->
            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">搜索：</label>
                        <div class="layui-input-inline mr0">
                            <input name="jobName" class="layui-input" type="text" placeholder="输入任务名"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">日期：</label>
                        <div class="layui-input-inline mr0" style="min-width: 200px;">
                            <input id="create_time" class="layui-input date-icon" type="text" placeholder="请选择日期范围"
                                   autocomplete="off"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="btnSearch" class="layui-btn icon-btn" lay-filter="searchSubmit" lay-submit><i class="layui-icon">&#xe615;</i>搜索</button>
                    </div>
                </div>
            </div>

            <table class="layui-table" id="jobExecutionTable" lay-filter="jobExecutionTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
    {{#  if(d.status != 'COMPLETED'){ }}
    <a class="layui-btn layui-icon layui-btn-primary layui-btn-xs" lay-event="restart" title="重跑">&#xe9aa;</a>
    <a class="layui-btn layui-icon layui-btn-primary layui-btn-xs" lay-event="continue" title="续跑">&#xe623;</a>
    {{#  } else { }}
    {{#  } }}
</script>
<!-- 查看详情弹窗 -->
<script type="text/html" id="modelStepExecution">
    <table id="modelStepExecutionTable" lay-filter="modelStepExecutionTable" class="layui-hide"></table>
</script>
<!-- 退出原因详情展开 -->
<script type="text/html" id="exitMessageDetail">
    {{#  if(d.exitCode == 'FAILED'){ }}
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="exitMessageDetail"><span>展开详情</span></a>
    {{#  } else { }}
    {{#  } }}
</script>
<!-- 查看退出原因详情弹窗 -->
<script type="text/html" id="exitMessageDetailHtml">
    <textarea class="layui-textarea textarea-inherit" readonly>{{d.exitMessage}}</textarea>
</script>
<!-- js部分 -->
<% include("../layout/js.html"){} %>
<script>
    layui.use(['layer', 'form', 'table', 'util', 'admin', 'tableX', 'laydate', 'laytpl'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;
        var tableX = layui.tableX;
        var laydate = layui.laydate;
        var laytpl = layui.laytpl;

        // 渲染表格
        var insTb = tableX.render({
            elem: '#jobExecutionTable',
            url: 'jobExecution/list',
            page: true,
            cellMinWidth: 100,
            cols: [[
                {type: 'numbers'},
                {field: 'jobExecutionId', title: 'excId', align: 'center', width: 65},
                {field: 'jobInstanceId', title: 'id', align: 'center', width: 50},
                {field: 'jobName', title: '任务名', align: 'center'},
                {field: 'aliasName', title: '任务别名', align: 'center'},
                {field: 'machId', title: 'machId', align: 'center', width: 80},
                {field: 'status', title: '状态', align: 'center', width: 60},
                // {field: 'exitCode', title: '运行结果', align: 'center'},
                {
                    field: 'startTime', sort: true, templet: function (d) {
                        return util.toDateString(d.createTime);
                    }, title: '开始时间'
                },
                {
                    field: 'endTime', sort: true, templet: function (d) {
                        return util.toDateString(d.endTime);
                    }, title: '结束时间'
                },
                // {
                //     field: 'lastUpdated', sort: true, templet: function (d) {
                //         return util.toDateString(d.updateTime);
                //     }, title: '最后更新时间'
                // },
                {templet: '#tableBar', title: '操作', align: 'center', minWidth: 100},
            ]],
            done: function (res, curr, count) {
                //COMPLETED, STARTING, STARTED, STOPPING, STOPPED, FAILED, ABANDONED, UNKNOWN;
                $("[data-field = 'status']").children().each(function(){
                    if($(this).text() == 'COMPLETED'){
                        $(this).text("完成");
                    }else if($(this).text() == 'STARTING'){
                        $(this).text("开始中");
                    }else if($(this).text() == 'STARTED'){
                        $(this).text("开始");
                    }
                    else if($(this).text() == 'STOPPING'){
                        $(this).text("停止中");
                    }
                    else if($(this).text() == 'STOPPED'){
                        $(this).text("停止");
                    }
                    else if($(this).text() == 'FAILED'){
                        $(this).text("失败");
                    }
                    else if($(this).text() == 'ABANDONED'){
                        $(this).text("丢弃");
                    }
                    else if($(this).text() == 'UNKNOWN'){
                        $(this).text("未知");
                    }
                })

                $("[data-field = 'exitCode']").children().each(function(){
                    if($(this).text() == 'UNKNOWN'){
                        $(this).text("未知");
                    }else if($(this).text() == 'EXECUTING'){
                        $(this).text("执行中");
                    }else if($(this).text() == 'COMPLETED'){
                        $(this).text("完成");
                    }
                    else if($(this).text() == 'NOOP'){
                        $(this).text("未处理");
                    }
                    else if($(this).text() == 'FAILED'){
                        $(this).text("失败");
                    }
                    else if($(this).text() == 'STOPPED'){
                        $(this).text("停止");
                    }
                })
            }
        });

        // 工具条点击事件
        table.on('tool(jobExecutionTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'restart') { // 重跑
                operateTask(data.jobExecutionId,data.jobInstanceId,data.machId,layEvent,'重跑')
            } else if (layEvent === 'continue') { // 续跑
                operateTask(data.jobExecutionId,data.jobInstanceId,data.machId,layEvent,'续跑')
            } else if (layEvent === 'detail') { // 详情
                showDetailModel(data.jobExecutionId);
            }
        });

        // job处理
        function operateTask(jobExcId,jobId,machId,type,desc) {
            layer.confirm('确定要' + desc + '吗？', {
                shade: .1,
                skin: 'layui-layer-admin'
            }, function (index) {
                layer.close(index);
                layer.load(2);
                $.post('jobExecution/operateTask', {
                    jobExcId: jobExcId,
                    jobId: jobId,
                    machId: machId,
                    type: type,
                }, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload();
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'json');
            });
        }

        // 显示详情弹窗
        function showDetailModel(jobExecutionId) {
            admin.open({
                type: 1,
                area: '1200px',
                offset: '65px',
                title: '查看详情',
                content: $('#modelStepExecution').html(),
                success: function () {
                    // 渲染表格
                    var insTbCom = tableX.render({
                        elem: '#modelStepExecutionTable',
                        url: 'jobExecution/detail?excId=' + jobExecutionId,
                        page: true,
                        height: 400,
                        cellMinWidth: 100,
                        cols: [[
                            {type: 'numbers'},
                            {field: 'stepExecutionId', sort: true, title: '步骤id', align: 'center'},
                            {field: 'stepName', sort: true, title: 'step名称', align: 'center'},
                            {field: 'status', title: '执行状态', align: 'center'},
                            {field: 'exitCode', title: '运行结果', align: 'center'},
                            {
                                field: 'startTime', sort: true, templet: function (d) {
                                    return util.toDateString(d.startTime);
                                }, title: '开始时间'
                            },
                            {
                                field: 'endTime', sort: true, templet: function (d) {
                                    return util.toDateString(d.endTime);
                                }, title: '结束时间'
                            },
                            {field: 'commitCount', title: '提交次数', align: 'center'},
                            {field: 'readCount', title: '读取次数', align: 'center'},
                            {field: 'filterCount', title: '过滤次数', align: 'center'},
                            {field: 'writeCount', title: '写入次数', align: 'center'},
                            {field: 'readSkipCount', title: '读取跳过次数', align: 'center'},
                            {field: 'writeSkipCount', title: '写入跳过次数', align: 'center'},
                            {field: 'processSkipCount', title: '处理跳过次数', align: 'center'},
                            {field: 'rollbackCount', title: '回滚次数', align: 'center'},
                            // {field: 'exitMessage', title: '退出原因'},
                            {field: 'exitMessage', title: '退出原因', templet: '#exitMessageDetail'},
                        ]],
                        done: function (res, curr, count) {
                            //COMPLETED, STARTING, STARTED, STOPPING, STOPPED, FAILED, ABANDONED, UNKNOWN;
                            $("[data-field = 'status']").children().each(function(){
                                if($(this).text() == 'COMPLETED'){
                                    $(this).text("完成");
                                }else if($(this).text() == 'STARTING'){
                                    $(this).text("开始中");
                                }else if($(this).text() == 'STARTED'){
                                    $(this).text("开始");
                                }
                                else if($(this).text() == 'STOPPING'){
                                    $(this).text("停止中");
                                }
                                else if($(this).text() == 'STOPPED'){
                                    $(this).text("停止");
                                }
                                else if($(this).text() == 'FAILED'){
                                    $(this).text("失败");
                                }
                                else if($(this).text() == 'ABANDONED'){
                                    $(this).text("丢弃");
                                }
                                else if($(this).text() == 'UNKNOWN'){
                                    $(this).text("未知");
                                }
                            })

                            $("[data-field = 'exitCode']").children().each(function(){
                                if($(this).text() == 'UNKNOWN'){
                                    $(this).text("未知");
                                }else if($(this).text() == 'EXECUTING'){
                                    $(this).text("执行中");
                                }else if($(this).text() == 'COMPLETED'){
                                    $(this).text("完成");
                                }
                                else if($(this).text() == 'NOOP'){
                                    $(this).text("未处理");
                                }
                                else if($(this).text() == 'FAILED'){
                                    $(this).text("失败");
                                }
                                else if($(this).text() == 'STOPPED'){
                                    $(this).text("停止");
                                }
                            })
                        }
                    });
                }
            });
        }

        // 工具条点击事件
        table.on('tool(modelStepExecutionTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'exitMessageDetail') {
                showErrorInfo(data);
            }
        });

        // 查看退出原因详情
        function showErrorInfo(data) {
            laytpl(exitMessageDetailHtml.innerHTML).render(data, function (html) {
                admin.open({
                    type: 1,
                    area: ['1000px', '300px'],
                    offset: '150px',
                    content: html,
                    title: '退出原因详情',
                });
            });
        }

        // 时间范围
        laydate.render({
            elem: '#create_time',
            type: 'date'
        });

        // 搜索
        form.on('submit(searchSubmit)', function (data) {
            data.field.startDate='';
            data.field.endDate='';
            var selDate = $('#create_time').val();
            if($('#create_time').val() != ''){
                data.field.startDate = selDate;
                data.field.endDate = selDate;
            }
            insTb.reload({where: data.field, page: {curr: 1}});
        });
    });
</script>
</body>
</html>